import React, { Component } from 'react'

import './index.css'
import {Route, Switch, Link, Redirect, NavLink, BrowserRouter as Router} from 'react-router-dom'


class Home extends Component{
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <NavLink to="/food">food</NavLink><hr/>
                        <NavLink to="/wiki">wiki</NavLink><hr/>
                        <NavLink to="/profile">profile</NavLink><hr/>
                    </ul>

                    {/* 使用Switch是为了将React默认的包容性路由变为排他性路由 */}
                    {/* 包容性路由：/food 既能匹配到/ 又能匹配到/food
                   排他性路由：只能匹配一个 /food就只能匹配到/food */}

                    <Switch>
                        {/*Redirect 是路由转化  即匹配到某一个路由转化到另一个路由  */}
                        <Redirect from="/" exact to="/food"/>
                        <Route path="/food" component={Food}/>
                        {/* 除了用Switch外也可以用exact来避免一个路由匹配多个，exact是精准匹配
                            但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 */}
                        {/* <Route path="/wiki" exact component={Wiki}/> */}
                        <Route path="/wiki" component={Wiki}/>
                        <Route path="/profile" component={Profile}/>
                        <Route component={Page404}/>
                    </Switch>
                </div>
            </Router>
        )
    }
}


//定义路由使用的组件

//在Food中定义子路由
const Food = () => (
    <div>
        <Link to="/food/foodlist/3">foodlist</Link><br/>
        <Link to="/food/foodmenu">foodmenu</Link>
        <Route path="/food/foodlist/:id" component = {Foodlist}></Route>
        <Route path="/food/foodmenu" component = {Foodmenu}></Route>
    </div>
)


const Wiki = () => (
    <div>Wiki</div>
)

const Profile = () => (
    <div>profile</div>
)

const Page404 = () => (
    <div>page not found.</div>
)

//定义路由使用的组件结束



//子路由调用的组件
const Foodlist = () => (
    <div>子路由的Foodlist</div>
)
const Foodmenu = () => (
    <div>子路由的Foodmenu</div>
)

export default Home